import React from 'react'
import PropTypes from 'prop-types';
import TableCell from '@material-ui/core/TableCell'
import NormalTextField from '../../TextField/NormalTextField'
import TableRow from '@material-ui/core/TableRow'
import {withStyles} from '@material-ui/core/styles'
import classNames from 'classnames'
import IconButton from '@material-ui/core/IconButton'
import SearchIcon from '@material-ui/icons/Search'
import 'react-infinite-calendar/styles.css';
import DateTextField from '../../TextField/DateTextField'
import TimeTextField from '../../TextField/TimeTextField'

const styles = theme => ({
    bodyRow: {},
    bodyCell:{ textAlign: 'center','&:last-child': {paddingRight:"0px"},padding: '0'},
    bodyReset:{color: '#757575'},
    bodySearchCell:{paddingRight:'8px'},
})

class SearchText extends React.Component {

    state = {
        searchTexts: {},
    }

    handleSearchTextChange = (value, rowName) => {
        let searchTexts = this.state.searchTexts
        searchTexts[rowName] = value
        this.setState({searchTexts: searchTexts})
    }

    handleDateTextChange = (value, rowName) => {
        let searchTexts = this.state.searchTexts
        searchTexts[rowName] = value
        this.setState({searchTexts: searchTexts})
    }

    handleSearchText = () => {
        this.props.searchFunc && this.props.searchFunc(this.state.searchTexts)
    }

    render() {
        const {rowNames, classes, dateColumn, timeColumn} = this.props
        return (
            <TableRow className={classes.bodyRow}>
                <TableCell padding="checkbox">
                </TableCell>
                {
                    rowNames.map((rowName, index) => (
                        <TableCell key={index}
                                   className={classNames(classes.bodyCell,classes.bodySearchCell)}>
                            {
                                dateColumn.indexOf(index+1) !== -1 ?  <DateTextField
                                        margin="dense"
                                        type="text"
                                        fullWidth
                                        autoComplete="off"
                                        parameters={[rowName]}
                                        onChange={this.handleDateTextChange}
                                    /> :
                                timeColumn.indexOf(index+1) !== -1 ? <TimeTextField
                                        margin="dense"
                                        type="text"
                                        fullWidth
                                        autoComplete="off"
                                        parameters={[rowName]}
                                        onChange={this.handleDateTextChange}
                                    /> :
                                    <NormalTextField
                                        margin="dense"
                                        type="text"
                                        fullWidth
                                        autoComplete="off"
                                        parameters={[rowName]}
                                        onChange={this.handleSearchTextChange}
                                    />
                            }
                        </TableCell>
                    ))
                }
                <TableCell margin="dense" className={classes.bodyCell}>
                    <IconButton onClick={this.handleSearchText}><SearchIcon/></IconButton>
                </TableCell>
            </TableRow>
        )
    }
}

SearchText.propTypes = {
    classes: PropTypes.object.isRequired,
    rowNames: PropTypes.array.isRequired, //每一行的索引值
    dateColumn: PropTypes.array,
    timeColumn: PropTypes.array,
    searchTexts: PropTypes.object
}

export default withStyles(styles)(SearchText)